<template>
  <el-button
      type="danger"
      style="margin: 10px 0 20px 0"
      :disabled="data.selectedRows.length === 0"
      @click="handleBatchDelete"
  >
    批量删除 ({{ data.selectedRows.length }})
  </el-button>
  <el-container class="container">

    <!-- Table with fixed width and height -->
    <el-table
        :data="data.logData"
        style="width: 100%; height: 500px; overflow: auto;"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="methodName" label="执行方法名称"/>
      <el-table-column prop="className" label="类名"/>
      <el-table-column prop="params" label="参数信息"/>

      <!-- 使用插槽渲染 status 列的 tag -->
      <el-table-column label="请求状态">
        <template v-slot="scope">
          <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>

<!--      <el-table-column prop="ipAddr" label="客户端ip"/>-->
      <el-table-column prop="result" label="请求结果"/>
      <el-table-column prop="executionTime" label="执行结果" :formatter="formatExecutionTime"/>
      <el-table-column prop="errorMessage" label="错误信息"/>
      <el-table-column prop="createdTime" label="创建时间" show-overflow-tooltip/>
      <el-table-column label="操作" width="150">
        <template v-slot="scoped">
          <el-button @click="handleDelete(scoped.row)" size="mini" type="text">
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-card>
      <el-pagination
          :current-page="data.pageNum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin-top: 20px;"
      />
    </el-card>
  </el-container>

</template>

<script setup>
import { reactive, onMounted } from "vue";
import {
  deleteLogInfoApi,
  loadLogInfoApi,
  deleteBatchLogInfoApi
} from "@/utils/gatewayApi/logInfoApi";
import { ElMessage, ElMessageBox } from "element-plus";
import {Delete} from "@element-plus/icons-vue";

const data = reactive({
  logData: [],
  total: 0,
  pageNum: 1,
  pageSize: 10,
  selectedRows: [] // 存储选中的行数据
});

/**
 * 格式化执行时间
 * @param row
 * @returns {`${*} ms`}
 */
const formatExecutionTime = (row) => {
  return `${row.executionTime} ms`;
};

const loadLogData = async () => {
  const response = await loadLogInfoApi({
    pageNum: data.pageNum,
    pageSize: data.pageSize
  });
  if (response.code === '200') {
    data.logData = response.data.content;
    data.total = response.data.totalElements;
    // 清空选中项，避免跨页选中问题
    data.selectedRows = [];
  } else {
    ElMessage.error(response.msg);
  }
};

/**
 * 分页大小改变
 * @param val
 */
const handleSizeChange = (val) => {
  data.pageSize = val;
  loadLogData();
};

/**
 * 分页改变
 * @param val
 */
const handleCurrentChange = (val) => {
  data.pageNum = val;
  loadLogData();
};

/**
 * 选中行变化时触发
 * @param selection 选中的行数据数组
 */
const handleSelectionChange = (selection) => {
  data.selectedRows = selection;
};

/**
 * 批量删除操作
 */
const handleBatchDelete = () => {
  if (data.selectedRows.length === 0) {
    ElMessage.warning('请至少选择一条记录');
    return;
  }

  ElMessageBox.confirm(
      `确定要删除选中的 ${data.selectedRows.length} 条日志记录吗？`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    const logIds = data.selectedRows.map(row => row.logId);
    deleteBatchLogInfoApi(logIds).then(res => {
      if (res.code === '200') {
        ElMessage.success(`成功删除 ${data.selectedRows.length} 条记录`);
        loadLogData();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

/**
 * 删除单行操作
 * @param row
 */
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '确定要删除这条日志记录吗？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    const logId = row.logId;
    deleteLogInfoApi(logId).then(res => {
      if (res.code === '200') {
        ElMessage.success('删除成功');
        loadLogData();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

onMounted(() => {
  loadLogData();
});
</script>

<style scoped>
/* 原有样式保持不变 */
.container{
  display: flex;
  flex-direction: column;
}
.el-table {
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-table th, .el-table td {
  font-size: 14px;
  padding: 10px;
}

.el-table-column .cell {
  text-align: center;
}

.el-button {
  margin-right: 5px;
}
.el-card {
  margin-top:5px ;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}
.el-pagination{
  margin:0 0 0 0;
  padding: 0;
}
</style>
